<template>
  <!-- 岗位等级 -->
  <view>
    <view class="styleJobDescriptionContainer">
      <view class="styleJobDescriptionTitleContainer">
        <view class="styleJobDescriptionTitleLine"></view>
        <view class="styleJobDescriptionTitle"> {{ layerInfo.title }}</view>
      </view>
      <!-- <view class="careerTypeBox">
        <view
          v-for="(item, index) in careerTypeList"
          :key="item.name"
          :class="[
            'careerType',
            currentCareerType === item.name ? 'active' : '',
            index == 0 ? 'first' : 'second'
          ]"
        >
          <view :class="['iconBox']">
            <image class="icon" :src="item.icon"></image>
          </view>
          <view class="careerTypeText">{{ item.name }}</view>
        </view>
      </view> -->
      <view class="content" v-if="layerInfo.data && layerInfo.data.length > 0">
        <!-- 等级图标 -->
        <view class="content-item1">
          <view
            v-for="(levelItem, levelIndex) in levelList"
            :key="levelIndex"
            class="content-item1-item"
          >
            <view class="content-item1-title">{{ levelItem.key1 }}</view>
            <view class="content-item1-content">{{ levelItem.key2 }}</view>
            <view
              class="content-item1-icon"
              :class="['content-item1-icon-' + `${levelIndex}`]"
            ></view>
          </view>
        </view>
        <!-- 任职 年限 -->
        <view class="content-item2">
          <view
            class="content-item2-content"
            :class="{ 'content-item2-content-two': yearIndex === 0 }"
            :style="{ width: getWidth(yearList.length) }"
            v-for="(yearItem, yearIndex) in yearList"
            :key="yearIndex"
          >
            <view class="content-item2-title" v-if="yearIndex === 0"
              >任职 年限</view
            >
            <view class="content-item2-content-item">{{ yearItem.key1 }}</view>
          </view>
        </view>
        <view class="content-item2">
          <view
            class="content-item2-content"
            :class="{ 'content-item2-content-two': projectIndex === 0 }"
            :style="{ width: getWidth(projectList.length) }"
            v-for="(projectItem, projectIndex) in projectList"
            :key="projectIndex"
          >
            <view class="content-item2-title" v-if="projectIndex === 0"
              >项目 经验</view
            >
            <view class="content-item2-content-item">{{
              projectItem.key1
            }}</view>
          </view>
        </view>
        <view class="content-item2 content-item2-bottom">
          <view
            class="content-item2-content"
            :class="{ 'content-item2-content-two': skillIndex === 0 }"
            :style="{ width: getWidth(skillList.length) }"
            v-for="(skillItem, skillIndex) in skillList"
            :key="skillIndex"
          >
            <view class="content-item2-title" v-if="skillIndex === 0"
              >技术 经验</view
            >
            <view class="content-item2-content-item">{{ skillItem.key1 }}</view>
          </view>
        </view>
      </view>
      <Empty
        v-else
        :baseImg="emptyImg"
        :text="emptyTitle"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
    </view>
  </view>
</template>
<script>
import Empty from '@/components/Empty.vue';
import LoginDialog from '@/components/LoginDialog';

export default {
  components: {
    Empty,
    LoginDialog
  },
  props: {
    layerInfo: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false,
      currentCareerType: '专业线',
      careerTypeList: [
        {
          name: '专业线',
          icon: 'https://img3.job1001.com/ypMp/elan/images/careerPath/positionDictionary/careerType2.png'
        },
        {
          name: '管理线',
          icon: 'https://img3.job1001.com/ypMp/elan/images/careerPath/positionDictionary/careerType2.png'
        }
      ],
      levelList: [], //等级
      yearList: [], //工作年限
      projectList: [], //项目经验
      skillList: [], //技术经验
      emptyTitle: '暂无数据'
    };
  },
  mounted() {},
  created() {},
  watch: {
    layerInfo: {
      handler(val) {
        if (val.data && val.data.length > 0) {
          this.$nextTick(() => {
            this.handleLayerInfo();
          });
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getWidth(length) {
      return `${(100 / length).toFixed(2)}%`;
    },
    handleLayerInfo() {
      const jsonList = JSON.parse(this.layerInfo.data[0].layerValue);
      jsonList.forEach((element) => {
        this.levelList.push({
          key1: element['等级'],
          key2: element['其他名称']
        });
        this.yearList.push({
          key1: element['任职年限']
        });
        this.projectList.push({
          key1: element['项目经验']
        });
        this.skillList.push({
          key1: element['技术经验']
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.styleJobDescriptionContainer {
  background-color: white;
  border-radius: 16rpx;
  margin: 36rpx 16rpx 24rpx 16rpx;

  .styleJobDescriptionTitleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    // margin-left: 32rpx;

    .styleJobDescriptionTitleLine {
      display: none;
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }

    .styleJobDescriptionTitle {
      color: #222222;
      font-size: 30rpx;
      font-weight: 800;
    }
  }
  .careerTypeBox {
    margin: 36rpx 0 38rpx 0;
    display: flex;
    justify-content: center;
    .careerType {
      display: flex;
      align-items: center;
      padding: 12rpx 0;
      justify-content: center;
      border-radius: 20rpx;
      width: 334rpx;
      .iconBox {
        padding: 10rpx 8rpx;
        background-color: #fff;
        border-radius: 15rpx;
        .icon {
          width: 46rpx;
          height: 46rpx;
        }
      }
      .careerTypeText {
        margin-left: 18rpx;
      }
      &:last-child {
        margin-left: 14rpx;
      }
    }
    .first {
      background: linear-gradient(180deg, #ffece9 0%, #ffffff 100%);
    }
    .second {
      background: #f1f9ff;
    }
    .active {
      position: relative;
      border: 4rpx solid #f75a3e;
    }
    .active:after,
    .active:before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .active:after {
      border-color: rgba(255, 239, 236, 0);
      border-top-color: #ffefec;
      border-width: 16rpx;
      margin-left: -16rpx;
    }
    .active:before {
      border-color: rgba(247, 90, 62, 0);
      border-top-color: #f75a3e;
      border-width: 20rpx;
      margin-left: -20rpx;
    }
  }
  .content {
    width: 100%;
    margin-top: 24rpx;
    padding: 0rpx 10rpx;
    background: #f8f8f8;
    border-radius: 8rpx;
    .content-item1 {
      display: flex;
      justify-content: space-between;
      align-items: flex-end; /* 可选：整体底部对齐（若子项高度不一致） */
      padding: 20rpx 12rpx 16rpx 12rpx;
      .content-item1-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%; /* 假设父容器有固定高度 */
        .content-item1-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
        }
        .content-item1-content {
          text-align: center;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #555555;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
          margin: 10rpx 10rpx;
        }
        .content-item1-icon {
          width: 100%;
          height: 192rpx;
          background: linear-gradient(180deg, #589bfd 0%, #bbdeff 100%);
          box-shadow: -2px -2px 4px -3px #418bf2;
          border-radius: 3px 3px 0px 0px;
        }
        .content-item1-icon-0 {
          width: 100%;
          height: 14rpx;
          background: linear-gradient(180deg, #589bfd 0%, #bbdeff 100%);
          border-radius: 3px 0px 0px 0px;
        }
        .content-item1-icon-1 {
          width: 100%;
          height: 52rpx;
          background: linear-gradient(180deg, #589bfd 0%, #bbdeff 100%);
          border-radius: 3px 0px 0px 0px;
        }
        .content-item1-icon-2 {
          width: 100%;
          height: 102rpx;
          background: linear-gradient(180deg, #589bfd 0%, #bbdeff 100%);
          box-shadow: -2px -2px 4px -3px #418bf2;
          border-radius: 3px 0px 0px 0px;
        }
        .content-item1-icon-3 {
          width: 100%;
          height: 192rpx;
          background: linear-gradient(180deg, #589bfd 0%, #bbdeff 100%);
          box-shadow: -2px -2px 4px -3px #418bf2;
          border-radius: 3px 3px 0px 0px;
        }
      }
    }
    .content-item2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e8e8e8; /* 虚线、颜色、粗细 */
      padding: 20rpx 6rpx;
      .content-item2-content {
        align-items: center;
        .content-item2-content-item {
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          line-height: 28rpx;
          height: 28rpx;
          text-align: right;
          font-style: normal;
        }
        .content-item2-title {
          width: 50rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 32rpx;
          text-align: right;
          font-style: normal;
        }
      }
      .content-item2-content-two {
        display: flex;
        justify-content: space-between;
      }
    }
    .content-item2-bottom {
      border-bottom: 1px solid transparent; /* 虚线、颜色、粗细 */
    }
  }
}
</style>
